<a href='https://github.com/angular/angular.js/edit/v1.4.x/src/ng/filter/filters.js?message=docs(date)%3A%20describe%20your%20change...#L351' class='improve-docs btn btn-primary'><i class="glyphicon glyphicon-edit">&nbsp;</i>Improve this Doc</a>



<a href='https://github.com/angular/angular.js/tree/v1.4.7/src/ng/filter/filters.js#L351' class='view-source pull-right btn btn-primary'>
  <i class="glyphicon glyphicon-zoom-in">&nbsp;</i>View Source
</a>


<header class="api-profile-header">
  <h1 class="api-profile-header-heading">date</h1>
  <ol class="api-profile-header-structure naked-list step-list">
    
    <li>
      - filter in module <a href="api/ng">ng</a>
    </li>
  </ol>
</header>



<div class="api-profile-description">
  <p>Formats <code>date</code> to a string based on the requested <code>format</code>.</p>
<p>  <code>format</code> string can be composed of the following elements:</p>
<ul>
<li><code>&#39;yyyy&#39;</code>: 4 digit representation of year (e.g. AD 1 =&gt; 0001, AD 2010 =&gt; 2010)</li>
<li><code>&#39;yy&#39;</code>: 2 digit representation of year, padded (00-99). (e.g. AD 2001 =&gt; 01, AD 2010 =&gt; 10)</li>
<li><code>&#39;y&#39;</code>: 1 digit representation of year, e.g. (AD 1 =&gt; 1, AD 199 =&gt; 199)</li>
<li><code>&#39;MMMM&#39;</code>: Month in year (January-December)</li>
<li><code>&#39;MMM&#39;</code>: Month in year (Jan-Dec)</li>
<li><code>&#39;MM&#39;</code>: Month in year, padded (01-12)</li>
<li><code>&#39;M&#39;</code>: Month in year (1-12)</li>
<li><code>&#39;dd&#39;</code>: Day in month, padded (01-31)</li>
<li><code>&#39;d&#39;</code>: Day in month (1-31)</li>
<li><code>&#39;EEEE&#39;</code>: Day in Week,(Sunday-Saturday)</li>
<li><code>&#39;EEE&#39;</code>: Day in Week, (Sun-Sat)</li>
<li><code>&#39;HH&#39;</code>: Hour in day, padded (00-23)</li>
<li><code>&#39;H&#39;</code>: Hour in day (0-23)</li>
<li><code>&#39;hh&#39;</code>: Hour in AM/PM, padded (01-12)</li>
<li><code>&#39;h&#39;</code>: Hour in AM/PM, (1-12)</li>
<li><code>&#39;mm&#39;</code>: Minute in hour, padded (00-59)</li>
<li><code>&#39;m&#39;</code>: Minute in hour (0-59)</li>
<li><code>&#39;ss&#39;</code>: Second in minute, padded (00-59)</li>
<li><code>&#39;s&#39;</code>: Second in minute (0-59)</li>
<li><code>&#39;sss&#39;</code>: Millisecond in second, padded (000-999)</li>
<li><code>&#39;a&#39;</code>: AM/PM marker</li>
<li><code>&#39;Z&#39;</code>: 4 digit (+sign) representation of the timezone offset (-1200-+1200)</li>
<li><code>&#39;ww&#39;</code>: Week of year, padded (00-53). Week 01 is the week with the first Thursday of the year</li>
<li><code>&#39;w&#39;</code>: Week of year (0-53). Week 1 is the week with the first Thursday of the year</li>
<li><code>&#39;G&#39;</code>, <code>&#39;GG&#39;</code>, <code>&#39;GGG&#39;</code>: The abbreviated form of the era string (e.g. &#39;AD&#39;)</li>
<li><p><code>&#39;GGGG&#39;</code>: The long form of the era string (e.g. &#39;Anno Domini&#39;)</p>
<p><code>format</code> string can also be one of the following predefined
<a href="guide/i18n">localizable formats</a>:</p>
</li>
<li><p><code>&#39;medium&#39;</code>: equivalent to <code>&#39;MMM d, y h:mm:ss a&#39;</code> for en_US locale
(e.g. Sep 3, 2010 12:05:08 PM)</p>
</li>
<li><code>&#39;short&#39;</code>: equivalent to <code>&#39;M/d/yy h:mm a&#39;</code> for en_US  locale (e.g. 9/3/10 12:05 PM)</li>
<li><code>&#39;fullDate&#39;</code>: equivalent to <code>&#39;EEEE, MMMM d, y&#39;</code> for en_US  locale
(e.g. Friday, September 3, 2010)</li>
<li><code>&#39;longDate&#39;</code>: equivalent to <code>&#39;MMMM d, y&#39;</code> for en_US  locale (e.g. September 3, 2010)</li>
<li><code>&#39;mediumDate&#39;</code>: equivalent to <code>&#39;MMM d, y&#39;</code> for en_US  locale (e.g. Sep 3, 2010)</li>
<li><code>&#39;shortDate&#39;</code>: equivalent to <code>&#39;M/d/yy&#39;</code> for en_US locale (e.g. 9/3/10)</li>
<li><code>&#39;mediumTime&#39;</code>: equivalent to <code>&#39;h:mm:ss a&#39;</code> for en_US locale (e.g. 12:05:08 PM)</li>
<li><p><code>&#39;shortTime&#39;</code>: equivalent to <code>&#39;h:mm a&#39;</code> for en_US locale (e.g. 12:05 PM)</p>
<p><code>format</code> string can contain literal values. These need to be escaped by surrounding with single quotes (e.g.
<code>&quot;h &#39;in the morning&#39;&quot;</code>). In order to output a single quote, escape it - i.e., two single quotes in a sequence
(e.g. <code>&quot;h &#39;o&#39;&#39;clock&#39;&quot;</code>).</p>
</li>
</ul>

</div>




<div>
  

  
  <h2>Usage</h2>
  <h3>In HTML Template Binding</h3>
  
    <pre><code>{{ date_expression | date : format : timezone}}</code></pre>
  

  <h3>In JavaScript</h3>
  <pre><code>$filter(&#39;date&#39;)(date, format, timezone)</code></pre>

  
<section class="api-section">
  <h3>Arguments</h3>

<table class="variables-matrix input-arguments">
  <thead>
    <tr>
      <th>Param</th>
      <th>Type</th>
      <th>Details</th>
    </tr>
  </thead>
  <tbody>
    
    <tr>
      <td>
        date
        
        
      </td>
      <td>
        <a href="" class="label type-hint type-hint-date">Date</a><a href="" class="label type-hint type-hint-number">number</a><a href="" class="label type-hint type-hint-string">string</a>
      </td>
      <td>
        <p>Date to format either as Date object, milliseconds (string or
   number) or various ISO 8601 datetime string formats (e.g. yyyy-MM-ddTHH:mm:ss.sssZ and its
   shorter versions like yyyy-MM-ddTHH:mmZ, yyyy-MM-dd or yyyyMMddTHHmmssZ). If no timezone is
   specified in the string input, the time is considered to be in the local timezone.</p>

        
      </td>
    </tr>
    
    <tr>
      <td>
        format
        
        <div><em>(optional)</em></div>
      </td>
      <td>
        <a href="" class="label type-hint type-hint-string">string</a>
      </td>
      <td>
        <p>Formatting rules (see Description). If not specified,
   <code>mediumDate</code> is used.</p>

        
      </td>
    </tr>
    
    <tr>
      <td>
        timezone
        
        <div><em>(optional)</em></div>
      </td>
      <td>
        <a href="" class="label type-hint type-hint-string">string</a>
      </td>
      <td>
        <p>Timezone to be used for formatting. It understands UTC/GMT and the
   continental US time zone abbreviations, but for general use, use a time zone offset, for
   example, <code>&#39;+0430&#39;</code> (4 hours, 30 minutes east of the Greenwich meridian)
   If not specified, the timezone of the browser will be used.</p>

        
      </td>
    </tr>
    
  </tbody>
</table>

</section>
  
  <h3>Returns</h3>
<table class="variables-matrix return-arguments">
  <tr>
    <td><a href="" class="label type-hint type-hint-string">string</a></td>
    <td><p>Formatted string or the input if input is not recognized as date/millis.</p>
</td>
  </tr>
</table>


  
  <h2 id="example">Example</h2><p>

<div>
  <a ng-click="openPlunkr('examples/example-example101', $event)" class="btn pull-right">
    <i class="glyphicon glyphicon-edit">&nbsp;</i>
    Edit in Plunker</a>

  <div class="runnable-example"
      path="examples/example-example101">

  
    <div class="runnable-example-file" 
      name="index.html"
      language="html"
      type="html">
      <pre><code>&lt;span ng-non-bindable&gt;{{1288323623006 | date:&#39;medium&#39;}}&lt;/span&gt;:&#10;    &lt;span&gt;{{1288323623006 | date:&#39;medium&#39;}}&lt;/span&gt;&lt;br&gt;&#10;&lt;span ng-non-bindable&gt;{{1288323623006 | date:&#39;yyyy-MM-dd HH:mm:ss Z&#39;}}&lt;/span&gt;:&#10;   &lt;span&gt;{{1288323623006 | date:&#39;yyyy-MM-dd HH:mm:ss Z&#39;}}&lt;/span&gt;&lt;br&gt;&#10;&lt;span ng-non-bindable&gt;{{1288323623006 | date:&#39;MM/dd/yyyy @ h:mma&#39;}}&lt;/span&gt;:&#10;   &lt;span&gt;{{&#39;1288323623006&#39; | date:&#39;MM/dd/yyyy @ h:mma&#39;}}&lt;/span&gt;&lt;br&gt;&#10;&lt;span ng-non-bindable&gt;{{1288323623006 | date:&quot;MM/dd/yyyy &#39;at&#39; h:mma&quot;}}&lt;/span&gt;:&#10;   &lt;span&gt;{{&#39;1288323623006&#39; | date:&quot;MM/dd/yyyy &#39;at&#39; h:mma&quot;}}&lt;/span&gt;&lt;br&gt;</code></pre>
    </div>
  
    <div class="runnable-example-file" 
      name="protractor.js"
      type="protractor"
      language="js">
      <pre><code>it(&#39;should format date&#39;, function() {&#10;  expect(element(by.binding(&quot;1288323623006 | date:&#39;medium&#39;&quot;)).getText()).&#10;     toMatch(/Oct 2\d, 2010 \d{1,2}:\d{2}:\d{2} (AM|PM)/);&#10;  expect(element(by.binding(&quot;1288323623006 | date:&#39;yyyy-MM-dd HH:mm:ss Z&#39;&quot;)).getText()).&#10;     toMatch(/2010\-10\-2\d \d{2}:\d{2}:\d{2} (\-|\+)?\d{4}/);&#10;  expect(element(by.binding(&quot;&#39;1288323623006&#39; | date:&#39;MM/dd/yyyy @ h:mma&#39;&quot;)).getText()).&#10;     toMatch(/10\/2\d\/2010 @ \d{1,2}:\d{2}(AM|PM)/);&#10;  expect(element(by.binding(&quot;&#39;1288323623006&#39; | date:\&quot;MM/dd/yyyy &#39;at&#39; h:mma\&quot;&quot;)).getText()).&#10;     toMatch(/10\/2\d\/2010 at \d{1,2}:\d{2}(AM|PM)/);&#10;});</code></pre>
    </div>
  

    <iframe class="runnable-example-frame" src="examples/example-example101/index.html" name="example-example101"></iframe>
  </div>
</div>


</p>

</div>


